<template>
    <div class="block_content">
        <el-row class="car_block" v-for="(item, index) in data" :key="index">
            <el-row>
                {{formatStr(item.acceptor_name)}} 
                <span class="bill_price">{{item.bill_sum_price/10000}}万 </span>
                <span class="text_right hpx-red-tips" @click="deleteCar(item)"> <i class="iconfont icon-shanchu"></i> 删除</span> 
            </el-row>
            <el-row class="every_plus">每十万扣</el-row>
            <el-row>
                <span v-if="item.bill_is_expired != 0">
                    {{item.bidding_mode == 3210 ? '一口价' : '竞价'}}
                    <span class="hpx-red-tips">
                        {{item.bidding_mode == 3210 ? item.every_plus_interest + '元' : (item.every_plus_interest && item.every_plus_interest != 0 ? item.every_plus_interest + '元' : '')}}
                    </span>
                </span>
                <span class="hpx-red-tips" v-if="item.bill_is_expired == 0">票已过期</span>
                <!-- 按钮的状态 -->
                <span class="text_right bill_status" @click="toBidding(item)" v-if="item.bill_status_code == 801">待竞价</span>
                <span class="text_right bill_status" v-if="item.bill_status_code != 801">票已下架</span>
            </el-row>
        </el-row>
    </div>
</template>

<script lang="ts">
    import {Vue, Component, Prop} from 'vue-property-decorator';
    import { ellipsis } from '@/util/format'
    @Component
    export default class billCar extends Vue {
        @Prop() data!:object
        
        formatStr (str:string) {
            return ellipsis(str,'...',6)
        }
        deleteCar (item) {
            this.$emit('delete',item)
        }
        toBidding (item) {
            this.$emit('bidding',item)
        }
    }
</script>

<style lang="scss" scoped>
    .block_content{
        padding: 0 10px;
        .car_block{
            margin-top: 12px;
            background-color: $__color-bg-primary;
            height: 106px;
            border-radius: 2px;
            padding: 7px 0;
            font-size: 14px;
            &:last-child{
                margin-bottom: 12px;
            }
            .el-row{
                line-height: 31px;
                position: relative;
                padding-left: 12px;
                color: $__color-show;
                .text_right{
                    position: absolute;
                    right: 0;
                    display: inline-block;
                    width: 100px;
                    height: 26px;
                    line-height: 26px;
                    text-align: center;
                    cursor: pointer;
                }
                .bill_price{
                    font-weight: 600;
                    font-size: 16px;
                }
                .bill_status{
                    background-color: $__color-bg-unimportance;
                    border-radius: 50px;
                    color: $__color-label;
                }
            }
            .every_plus{
                color: $__color-label;
            }
        }
    }
</style>